{{#>base title=data.page.echarts_bar}}

    {{#*inline "pageContent"}}
        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.echarts_bar}}
                </h3>

                <div class="tabs-wrap">
                    <ul class="nav nav-tabs">

                        <li>
                            <a href="echarts-bar.html">标准柱状图</a>
                        </li>
                        <li>
                            <a href="echarts-bar-horizon.html">横向柱状图</a>
                        </li>
                        <li>
                            <a href="echarts-bar-stack.html">堆积柱状图</a>
                        </li>
                        <li class="active">
                            <a href="echarts-bar-custom.html">彩虹柱状图</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <!-- BEGIN PAGE CONTENT-->
        <div class="row">
            <div class="col-md-12">

                <div class="portlet box default">

                    <div class="portlet-body">
                        <div class="chart-default ">
                            <div class="chart-body" id="my_chart"></div>
                        </div>

                    </div>

                </div>

            </div>

        </div>


        <div class="row">
            <div class="col-md-12">
                <div class="markdown">
                    <h3>Javascript</h3>
<pre><code class="javascript">require('../../plugins/echarts/module');
var chart = $p.echarts("my_chart", { type: "bar" });
chart.load({
        name: "PV",
        columns: ['百度', '谷歌', '360搜索', '搜狗', '必应', '雅虎', '网易有道'],
        rows: [{
            name: "浏览量(PV)",
            value: [735, 310, 234, 135, 548, 148, 114]
        }]
    },
        function(option) {
         option.series[0].itemStyle.normal = {
             color: function(params) {
                var colorList = [ '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD', '#D7504B',
    '#C6E579', '#F4E001', '#F0805A', '#26C0C0' ];
                return colorList[params.dataIndex];
        }
};
return option; });</code></pre>

                    {{>fixtures/echarts-footer}}

                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT-->
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call([
                "modules/echarts-bar/app",
                "plugins/echarts/loader"
            ], function(app) {
                app.page.custom();
            });
        </script>
    {{/inline}}

{{/base}}
